<template>
	<view class="login-page">
		<status-bar></status-bar>
		<!-- 顶部蓝色背景栏 -->
		<view class="login-topbar">
			<!-- <view class="back-btn" @click="goBack"></view> -->
			<text class="header-title">登录</text>
		</view>
		<view class="login-container">
			<view class="login-welcome">
				<text class="welcome-title">你好，师傅</text>
				<text class="welcome-sub">欢迎登录指尖帮APP</text>
			</view>
			<!-- 登录方式切换 -->
			<view class="login-tabs flex align-center">
				<view :class="['tab', loginType === 'password' ? 'active' : '']" @click="loginType = 'password'">密码登录
				</view>
				<view :class="['tab', loginType === 'sms' ? 'active' : '']" @click="loginType = 'sms'">短信登录</view>
			</view>

			<view v-if="loginType === 'password'">
				<view class="input-group">
					<!-- 手机号输入框 -->
					<view class="input-item flex align-center">
						<view class="iconfont icon-user icon"></view>
						<input v-model="loginForm.mobile" class="input" type="text" placeholder="请输入手机号"
							maxlength="11" />
						<view v-if="loginForm.mobile" class="input-clear" @click="loginForm.mobile = ''">×</view>
					</view>
					<!-- 密码输入框 -->
					<view class="input-item flex align-center">
						<view class="iconfont icon-password icon"></view>
						<input v-model="loginForm.password" :type="showPwd ? 'text' : 'password'" class="input"
							placeholder="请输入密码" maxlength="20" />
						<view v-if="loginForm.password" class="input-clear" @click="loginForm.password = ''">×</view>
						<view class="input-eye" @click="showPwd = !showPwd">
							<text :class="showPwd ? 'iconfont icon-eye' : 'iconfont icon-eye-off'"></text>
						</view>
					</view>
				</view>
				<!-- 记住密码 -->
				<!-- <view class="remember-row flex align-center">
          <checkbox v-model="rememberPwd" />
          <text class="remember-text">记住密码</text>
        </view> -->
			</view>
			<view v-else>

				<view class="input-group">
					<view class="input-row flex align-center">
						<view class="iconfont icon-user icon"></view>
						<!-- <picker mode="selector" :range="areaCodes" v-model="areaCodeIndex" class="area-picker">
              <view class="area-code">+{{ areaCodes[areaCodeIndex] }}</view>
            </picker> -->
						<input v-model="smsForm.mobile" class="input" type="text" placeholder="请输入手机号" maxlength="11" />
						<view v-if="smsForm.mobile" class="input-clear" style="margin-right: 180rpx;"
							@click="smsForm.mobile = ''">×</view>
						<view class="divider"></view>
						<button class="sms-btn" :disabled="smsTimer > 0" @click="getSmsCode">
							{{ smsTimer > 0 ? smsTimer + 's' : '获取验证码' }}
						</button>
					</view>
					<view class="input-row flex align-center">
						<view class="iconfont icon-code icon"></view>
						<input v-model="smsForm.code" class="input" type="text" placeholder="请输入验证码" maxlength="6" />
						<view v-if="smsForm.code" class="input-clear" @click="smsForm.code = ''">×</view>
					</view>
				</view>
			</view>
			<!-- 底部操作 -->
			<view class="bottom-row flex justify-between">
				<text class="link" @click="handleUserRegister">立即注册</text>
				<text class="link" @click="handleForgetPwd">忘记密码?</text>
			</view>
			<!-- 登录按钮 -->
			<button @click="handleLogin" class="login-btn">登录</button>
		</view>
	</view>
</template>

<script>
import {
	getToken,
	setToken
} from '../utils/auth';
import user from '../store/modules/user';


export default {
	data() {
		return {
			loginType: 'password',
			loginForm: {
				mobile: '',
				password: '',
			},
			showPwd: false,
			rememberPwd: false,
			// 短信登录相关
			areaCodes: ['86', '852', '853', '886'],
			areaCodeIndex: 0,
			smsForm: {
				mobile: '',
				code: ''
			},
			smsTimer: 0,
			smsTimerId: null
		}
	},
	
	onLoad() {
		// 页面加载时检查是否有token，如果有则直接执行登录成功方法
		const token = getToken();
		if (token) {
			console.log('检测到已有token，直接执行登录成功流程');
			this.loginSuccess();
		}
	},
	
	methods: {
		goBack() {
			uni.navigateBack()
		},
		handleUserRegister() {
			uni.navigateTo({
				url: '/pages/register'
			});
		},
		handleForgetPwd() {
			uni.navigateTo({
				url: '/pages/forgetPwd'
			});
		},
		async handleLogin() {
			if (this.loginType === 'password') {
				if (!this.loginForm.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				try {
					uni.showLoading({
						title: '请求中'
					})
					const res = await user.actions.LoginUsername(this.loginForm.mobile, this.loginForm.password)
					if (res.code == 200) {
						this.loginSuccess()
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
					}
				} catch (error) {
					console.error(error)
				} finally {
					uni.hideLoading()
				}
			} else {
				if (!this.smsForm.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.smsForm.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				try {
					uni.showLoading({
						title: '请求中'
					})
					const res = await user.actions.LoginPhone(this.smsForm.mobile, this.smsForm.code)
					if (res.code == 200) {

						this.loginSuccess()
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
					}
				} catch (error) {
					console.error(error)
				} finally {
					uni.hideLoading()
				}
			}
		},
		async getSmsCode() {
			if (!this.smsForm.mobile) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			try {
				uni.showLoading({
					title: '请求中'
				})
				const res = await user.actions.LoginPhoneCode(this.smsForm.mobile)
				if (res.code == 200) {
					this.smsTimer = 60;
					this.smsTimerId = setInterval(() => {
						this.smsTimer--;
						if (this.smsTimer <= 0) {
							clearInterval(this.smsTimerId);
							this.smsTimerId = null;
						}
					}, 1000);
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
				}
			} catch (error) {
				console.error(error)
			} finally {
				uni.hideLoading()
			}
		},
		// 登录成功后，处理函数
		loginSuccess() {
			// 设置用户信息
			// this.$store.dispatch('GetInfo').then(res => {
				this.$tab.reLaunch('/pages/perfectInfo?from=login')
			// })
		}
	},
	beforeDestroy() {
		if (this.smsTimerId) {
			clearInterval(this.smsTimerId);
		}
	}
}
</script>

<style lang="scss" scoped>
.login-page {
	background: #fff;
	min-height: 100vh;
}

.login-topbar {
	background: #1890ff;
	height: 100rpx;
	display: flex;
	align-items: center;
	position: relative;

	.back-btn {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
		background: url('data:image/svg+xml;utf8,<svg ...>') no-repeat center/contain;
	}

	.header-title {
		flex: 1;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 40rpx;
	}
}

page,
.login-container {
	background-color: #fff;
}

.login-container {
	width: 90%;
	margin: 0 auto;
	padding-top: 40rpx;

	.login-tabs {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 30rpx;

		.tab {
			font-size: 32rpx;
			color: #888;
			margin-right: 40rpx;
			padding-bottom: 10rpx;
			border-bottom: 4rpx solid transparent;

			&.active {
				color: #1890ff;
				border-bottom: 4rpx solid #1890ff;
				font-weight: bold;
			}
		}
	}

	.login-welcome {
		margin: 40rpx 0 30rpx 0;
		text-align: center;

		.welcome-title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 10rpx;
		}

		.welcome-sub {
			display: block;
			font-size: 36rpx;
			color: #222;
		}
	}

	.input-item,
	.input-row {
		margin: 20rpx 0;
		background: #f5f6f7;
		border-radius: 20rpx;
		height: 90rpx;
		padding: 0 20rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			font-size: 38rpx;
			color: #999;
			margin-right: 10rpx;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			background: transparent;
			border: none;
			outline: none;
		}

		.input-clear,
		.input-eye {
			font-size: 36rpx;
			color: #bbb;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
		}

		.input-eye {
			right: 20rpx;
		}

		.area-picker {
			margin-right: 10rpx;
		}

		.area-code {
			font-size: 28rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.divider {
			width: 1px;
			height: 40rpx;
			background: #e5e5e5;
			margin: 0 10rpx;
		}

		.sms-btn {
			background: none;
			color: #1890ff;
			font-size: 28rpx;
			border: none;
			padding: 0 10rpx;
			height: 60rpx;
			line-height: 60rpx;
		}

		.label {
			font-size: 28rpx;
			color: #333;
			margin-right: 10rpx;
		}
	}

	.input-group {
		background: #fff;
		border-radius: 20rpx;
		// box-shadow: 0 2rpx 8rpx #f0f1f2;
		padding: 10rpx 0;

		.input-row {
			border-bottom: 1px solid #f0f1f2;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.bottom-row {
		margin: 30rpx 0 0 0;
		display: flex;
		justify-content: space-between;

		.link {
			color: #1890ff;
			font-size: 28rpx;
		}
	}

	.login-btn {
		margin-top: 50rpx;
		background: #1890ff;
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

}
</style>